<template>
  <div class="app_headerView">
    <div class="app_headerView_left horizontalFlex">
      <el-icon :size="20" @click="setIsUnfold" v-if="state.isMobile ? state.showMenuDrawer : state.isUnfold"><expand /></el-icon>
      <el-icon :size="20" @click="setIsUnfold" v-else><fold /></el-icon>
    </div>
    <div class="app_headerView_right horizontalFlex">
      <Setting/>
    </div>
<!--    <ion-icon name="chevron-forward-circle-outline" @click="setIsUnfold" size="small" v-if="state.isMobile ? state.showMenuDrawer : state.isUnfold"></ion-icon>-->
<!--    <ion-icon name="chevron-back-circle-outline" @click="setIsUnfold" size="small" v-else></ion-icon>-->
  </div>
</template>

<script setup lang="ts">
import { Expand,Fold } from '@element-plus/icons-vue';
import Setting from '@/components/Setting/Setting.vue';
import { useStore } from "vuex";

let store = useStore();
let state = store.state;
const setIsUnfold = () => {
  if(state.isMobile) {
    // showDrawer.value = !showDrawer.value
    store.commit('setShowMenuDrawer', !state.showMenuDrawer);
  }
  store.commit('setIsUnfold', !state.isUnfold);
};
</script>

<style scoped lang="scss">
.app_headerView {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-icon{
    cursor: pointer;
    &:hover{
      color: var(--el-color-primary);
    }
  }
  &_left{
  }
  &_right{
  }
}
</style>